<template>
	<view>
		<view class="PolicySearch Enterprise">
			<view class="PolicySearchc">
				<input type="text" v-model="searchKeyword" placeholder="输入搜索关键词">
				<view class="PolocyBtn" @click="handleSearch">搜索</view>
			</view>
		</view>
		<view class="Collect">
			<view class="CollectTop">
				<view :class="['CollectTopLi', activeIndex === index ? 'on' : '']" v-for="(item, index) in collectTabs" :key="index" @click="changeTabsIndex(index)">{{ item }}</view>
			</view>
			<view class="CollectBot">
				<policyDocument v-if="activeIndex === 0" :searchKeyword="searchKeyword" />
				<declarationGuide v-if="activeIndex === 1" :searchKeyword="searchKeyword" />
			</view>
		</view>
	</view>
</template>

<script>
	import policyDocument from './components/policyDocument.vue'
	import declarationGuide from './components/declarationGuide.vue'
	export default {
		components: { policyDocument, declarationGuide },
		data() {
			return {
				collectTabs: ['政策文件', '申报指南'],
				activeIndex: 0,
				searchKeyword: ''
			};
		},
		methods: {
			changeTabsIndex(index) {
				this.activeIndex = index
			},
			handleSearch() {
				// 触发子组件重新加载数据
				this.$forceUpdate()
			}
		},
		onReachBottom() {
			// 当页面滚动到底部时，根据当前激活的标签触发对应子组件的加载更多
			if (this.activeIndex === 0) {
				// 政策文件标签，触发加载更多
				uni.$emit('scrolltolower');
			} else if (this.activeIndex === 1) {
				// 申报指南标签，触发加载更多
				uni.$emit('scrolltolower');
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #f7f8fc;
}
.Enterprise{
	padding: 30rpx 24rpx 40rpx;
	background: none;
}
.Collect{
	padding: 0 24rpx;
	.CollectTop{
		display: flex;
		justify-content: space-between;
		padding: 0 0 30rpx;
		.CollectTopLi{
			width: 341rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #e6e9f4;
			font-size: 32rpx;
			color: #202020;
			border-radius: 20rpx;
			&.on{
				color: #ffffff;
				background: #2f59fe;
			}
		}
	}
}
</style>
